iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
4
Modern Web

30天學習30套前端技術(2018年)系列 第 2

[十分鐘學習] Lazy Load - 上班打卡外,圖片也要壓線載入

  • 分享至 

  • xImage
  •  

example1

Lazy Load幫高度較長的網頁,進行延遲載入圖片,尚未瀏覽到該部份時,不會載入視角外的圖片,提高效率

GitHub Star: 6,900
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE7+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- Lazy Load v2.0.0-beta.2 -->
      <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
    
  • npm

      $ npm install lazyload
    
  • Yarn

      $ yarn add lazyload
    

《範例》

  • 延遲載入效果

      <img data-src="【原圖URL】">
      <script>
      	$( "img" ).lazyload();
      </script>
    
  • 響應式效果

    example2

      <img class="example" data-src="【原圖URL】" data-srcset="【特殊尺寸圖片URL】 480w, 【特殊尺寸圖片URL】 640w, 【特殊尺寸圖片URL】 1024w" />
      <!--
      	屬性設定[註1]
      	data-src: 當瀏覽器不支援data-srcset時,則顯示原圖
      	data-srcset: 當螢幕解析度不同時,則顯示特定尺寸圖片
      -->
      <script>
      	$( ".example").lazyload();
      </script>
    

    [註1]

    屬性 描述

    data-src|當瀏覽器不支援data-srcset時,則顯示原圖
    data-srcset|當螢幕解析度不同時,則顯示特定尺寸圖片


《延伸》

  1. Vanilla JavaScript Lazy Load Plugin
  2. tuupola/jquery_lazyload: Vanilla JavaScript plugin for lazyloading images

上一篇
[十分鐘學習] DataTables - 替表格穿上鋼鐵衣
下一篇
[十分鐘學習] JQuery lightSlider - 圖片滑起來
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
harryx001
iT邦新手 5 級 ‧ 2023-08-27 12:36:24

想請問這必須要從後端安裝npm才有辦法有效,無法前端HTML寫好就有效,對嗎?

mfhsueh iT邦新手 4 級 ‧ 2023-08-27 16:12:45 檢舉

不一定要透過npm安裝,直接透過HTML寫入就可以使用。

我要留言

立即登入留言